<template>
  <div class="empty">
      <!-- 树结构 -->
      <el-tree :data="data"  :node-key='nodekey' @node-contextmenu="rightClick"  @node-click="handleNodeClick"></el-tree>
      <!-- 右键出现的菜单 -->
      <div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{...rightMenu}">
        <ul>
          <li class="disabled"><i class="el-icon-tickets"></i> 添加</li>
          <li class="disabled"><i class="el-icon-edit"></i> 编辑</li>
          <li @click="onDelete"><i class="el-icon-delete"></i> 删除</li>
        </ul>
      </div>
  </div>
</template>
<script type="text/javascript">
// import empty from './empty.vue'
export default {
  props:{
    value:[Object,Array],
    nodekey:[String,Number]
  },
  components: {
    //empty
  },
  data() {
    return {
      // 右键浮窗位置
      tmDisplay:false,
      // DOM节点
      removeData:undefined,
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    data:{
      get:function(){
        return this.value;
      },
      set:function(val,old){

      }
    }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
      onDelete(){
        this.tmDisplay = false;
        this.$confirm('删除后将不可恢复，是否继续?', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.foreach(this.data);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

      /**
       * 递归删除节点
       * @param  {[type]} data [description]
       * @return {[type]}      [description]
       */
      foreach(data){
        data.forEach((item,index) =>{
          if(this.removeData === item[this.nodekey]){
            data.splice(index,1);
            this.$emit('input',this.data);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            return true;
          }
          if(item.children){
            this.foreach(item.children);
          }
        })
      },


      /**
       * 左键事件  隐藏菜单栏
       * @param  {[type]} data [description]
       * @return {[type]}      [description]
       */
      handleNodeClick(data) {
        this.tmDisplay = false;
      },

      /**
       * 右键事件
       * @return {[type]} [description]
       */
      rightClick(e,data,node,comp){
        this.tmDisplay = false;
        this.rightMenu = {top:e.pageY+'px',left:e.pageX+'px'}
        this.tmDisplay = true;
        this.removeData = data[this.nodekey];
      }
  }
}

</script>
<style type="text/css" lang="scss">
.disabled{
  background-color: rgba(99,99,99,0.1) !important;
  color:rgba(99,99,99,0.5) !important;
  cursor:default !important;
}


.tree_menu{
  position: fixed;
  display: block;
  z-index: 20000;
  background-color: #fff;
  padding:5px 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
 
  ul{
    margin:0;
    padding:0;
  }
  ul li{
    list-style: none;
    margin:0;
    padding:0 15px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
  }
  ul li:hover{
    background-color: #ebeef5
  }
}
</style>
